<template >
  <div class="container">
    <el-card style="width: 600px; ">


      <el-row>
        <el-col :span="8"></el-col>
        <el-col :span="8" class="text-center">
          <div class="centered-text">邮箱账号登录</div>
        </el-col>
        <el-col :span="8"></el-col>
      </el-row>

      <el-form ref="ruleFormRef"
        style="max-width: 550px; display: flex; flex-direction: column; align-items: center; margin: 0px auto 0;"
        :model="ruleForm" status-icon :rules="rules" label-width="auto" class="demo-ruleForm">

        <el-form-item label="邮箱" prop="email">
          <el-input v-model.trim="ruleForm.email" autocomplete="off" />
        </el-form-item>

        <el-form-item label="密码" prop="pass">
          <el-input v-model.trim="ruleForm.pass" type="password" autocomplete="off" />
        </el-form-item>

        <el-link type="primary" @click="goToWechatLogin">微信登录</el-link>


        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            登录
          </el-button>
        </el-form-item>

       
        <el-link type="primary" @click="goToRegister">没有账号？去注册</el-link>


      </el-form>
    </el-card>
  </div>
</template>
  
  
  
  
<script lang="ts" setup>
import { ref, reactive } from "vue";
import type { FormInstance, FormRules } from "element-plus";

import { useRoute, useRouter } from "vue-router";

import { login } from '@/api/user';


import { useTokenStore } from '@/stores/user'


//路由
const router = useRouter();

const ruleFormRef = ref<FormInstance>();


const checkEmail = (rule: any, value: any, callback: any) => {
  let reg =
    /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
  if (!reg.test(value)) {
    return callback(new Error("邮箱格式错误"));
  } else if (value.length > 50) {
    return callback(new Error("不支持超过50个字符的邮箱地址"));
  }
  callback();
};

const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输出密码"));
  } else {
    callback();
  }
};





const ruleForm = reactive({
  email: "",
  pass: ""
});

const rules = reactive<FormRules<typeof ruleForm>>({
  email: [{ validator: checkEmail, trigger: "blur" }],
  pass: [{ validator: validatePass, trigger: "blur" }],
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      console.log("submit!");


      login(ruleForm.email, ruleForm.pass)
        .then(result => {
          console.log(result);

            const tokenStore = useTokenStore();

            console.log("store.Authorization:" + tokenStore.Authorization);

            tokenStore.login(result.data);
            router.push("/ai_chat");

        })
        .catch((error)=>{
          console.log('error' + error);
        })

    } else {
      console.log("error submit!");
    }
  });
};



console.log("loginView.Auth:" + useTokenStore().Authorization);



const goToRegister = () => {
  router.push('/register');
}


const goToWechatLogin = () => {
  router.push("/wechat_login");
}


</script>
  
  
  
  
  
<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 95vh;
}

.text-center {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  height: 100%;
  /* 确保有足够的高度进行垂直居中 */
  /* 如果需要，可以添加一些内边距或边框来美化 */
  padding: 10px 0;
  /* 上下内边距 */
}

.centered-text {
  font-size: 20px;
  font-weight: bold;
  color: blue;
}
</style>